<template>
    <div style="width: 100%;">
       <div v-if="!data.isMobile" style="height: 25px;"></div>
       <!-- <userInfoSection :user-info="data.loginedUserInfo"></userInfoSection> -->
       <div v-if="data.loginedUserInfo==undefined && !data.isMobile" style="width: 100%;height: calc(100vh - 105px);background-color: #fff0f0;border-radius: 5px;padding-left: 50%;padding-top: calc(50vh - 52.5px);">
        <div style="transform: translate(-50%,-50%);display: inline-block;text-align: center;">
          <icon-info-circle />请先登录以使用查询功能和填报志愿<br>
            <a-button style="margin-top: 10px;" type="primary" @click="changePage(7)">登录</a-button>
        </div>
       </div>
       <div v-if="!data.isMobile" style="position: relative;">
        <div style="width: 300px;border-radius: 5px;border: 1px solid rgb(230,230,230);margin-bottom: 20px;">
          <div style="padding: 20px 20px;border-bottom: 1px solid rgb(230,230,230);">
            收藏夹
          </div>
          <div style="padding: 10px 10px;">
            <div class="right-button" @click="changePage1(1);get();" :style="{backgroundColor:rightPageId==1?'rgb(230,230,230)':'',color:rightPageId==1?'rgb(0,120,215)':''}">
              院校
            </div>
            <div class="right-button" @click="changePage1(2);get();" :style="{backgroundColor:rightPageId==2?'rgb(230,230,230)':'',color:rightPageId==2?'rgb(0,120,215)':''}">
              专业
            </div>
          </div>
        </div>
        <div style="width: 300px;border-radius: 5px;border: 1px solid rgb(230,230,230);">
          <div style="padding: 20px 20px;border-bottom: 1px solid rgb(230,230,230);">
            菜单
          </div>
          <div style="padding: 10px 10px;">
            <div class="right-button" @click="get();">
              刷新页面
            </div>
          </div>
        </div>
        <div style="width: calc(100% - 320px);display: inline-block;position: absolute;right: 0;top: 0;">
          <div v-if="isGetting" style="width: 100%;text-align: center;padding: 20px 0;">
            <a-button style="color: black;scale: 1.2;background-color: white;" :loading="true">正在获取</a-button>
          </div>
          <div v-if="rightPageId==1 && isGetting==false">
            <div v-if="universities.length==0" style="width: 100%;padding: 20px 20px;text-align: center;margin-bottom: 20px;">
              院校收藏夹为空
            </div>
            <div class="university-item" v-bind:key="item" v-for="item in universities" style="border-radius: 5px;border: 1px solid rgb(230,230,230);padding: 20px 20px;margin-bottom: 20px;position: relative;" @click="showUniversityIntroductionPage(item.name)">
                    <div style="font-size: 20px;font-weight: bold;">
                        <span>
                            {{ item.info[0].name }}
                        </span>
                        <span style="font-size: 12px;font-weight: normal;padding: 2px 2px;background-color: rgb(242,242,242);border-radius: 3px;margin-left: 15px;">
                            {{ item.info[0].province + " " + item.info[0].city + " " + item.cityLevel }}
                        </span>
                    </div>
                    <div style="font-size: 14px;margin-top: 15px;">
                        <span v-if="item.public!=''" style="margin-right: 10px;">{{ item.info[0].public }}</span>
                        <span v-if="item.type!=''" style="margin-right: 10px;">{{ item.info[0].type }}</span>
                        <span v-if="item.focus!=''" style="margin-right: 10px;">{{ item.info[0].focus=="985211"?"985,211":item.info[0].focus }}</span>
                        <span v-if="item.firstRate!=''" style="margin-right: 10px;">{{ item.info[0].firstRate }}</span>
                    </div>
                    <div  v-if="item.info[0].minScore!=0 && item.info[0].minRanking!=0" style="font-size: 16px;color: rgb(0, 58, 0);background-color: rgb(217, 255, 217);border-radius: 3px;padding: 5px 5px;position: absolute;right: 20px;top: 20px;">
                        最低分/最低位次：{{ item.info[0].minScore + "/" + item.info[0].minRanking }}
                    </div>
                </div>
          </div>
          <div v-if="rightPageId==2 && isGetting==false">
            <div v-if="majorcontents.length==0" style="width: 100%;padding: 20px 20px;text-align: center;margin-bottom: 20px;">
              专业收藏夹为空
            </div>
            <div class="university-item" v-bind:key="item" v-for="item in majorcontents" style="width: 100%;padding: 20px 20px;border-radius: 5px;border: 1px solid rgb(230,230,230);margin-bottom: 20px;" @click="showMajorIntroductionPage(item.info[0].majorName)">
              <div style="font-size: 18px;font-weight: bold;margin-bottom: 5px;">
                {{ item.info[0].majorName }}
              </div>
              <div style="font-size: 14px;">
                {{ item.info[0].class + ' ' + item.info[0].majorClass + ' ' + item.info[0].remark + " " + item.info[0].year }}
              </div>
            </div>
          </div>
        </div>
       </div>
       <div v-if="data.isMobile" style="width: 100%;height: 100%;">
        <div style="width: 100%;padding: 20px 20px;padding-bottom: 10px;">
            <span style="margin-right: 10px;;border-radius: 5px;font-size: 18px;" @click="changePage(2)">院校查询</span>
            <span style="margin-right: 10px;;border-radius: 5px;font-size: 18px;" @click="changePage(3)">专业查询</span>
            <span style="margin-right: 10px;;border-radius: 5px;font-size: 22px;font-weight: bold;">收藏夹</span>
        </div>
        <div style="padding: 10px 10px;padding-top: 0;">
          <a-radio-group type="button" v-model="rightPageId">
            <a-radio :value="1" @click="changePage1(1);get();">院校</a-radio>
            <a-radio :value="2" @click="changePage1(2);get();">专业</a-radio>
          </a-radio-group><a-button style="margin-left: 10px;" @click="get" :loading="isGetting">刷新</a-button>
        </div>
        <div style="width: 100%;height: calc(100% - 55.29px - 42px);overflow-y: scroll;padding: 10px 10px;">
          <div v-if="isGetting" style="width: 100%;text-align: center;padding: 20px 0;">
            <a-button style="color: black;scale: 1.2;background-color: white;" :loading="true">正在获取</a-button>
          </div>
          <div v-if="rightPageId==1 && isGetting==false">
            <div v-if="universities.length==0" style="width: 100%;padding: 20px 20px;text-align: center;margin-bottom: 20px;">
              院校收藏夹为空
            </div>
            <div class="university-item" v-bind:key="item" v-for="item in universities" style="border-radius: 5px;border: 1px solid rgb(230,230,230);padding: 10px 10px;margin-bottom: 10px;position: relative;" @click="showUniversityIntroductionPage(item.name)">
                    <div style="font-size: 18px;font-weight: bold;">
                        <span>
                            {{ item.info[0].name }}
                        </span>
                        <span style="font-size: 12px;font-weight: normal;padding: 2px 2px;background-color: rgb(242,242,242);border-radius: 3px;margin-left: 15px;">
                          {{ item.info[0].province + " " + item.info[0].city + " " + item.cityLevel }}
                        </span>
                    </div>
                    <div style="font-size: 14px;margin-top: 10px;">
                        <span v-if="item.public!=''" style="margin-right: 10px;">{{ item.info[0].public }}</span>
                        <span v-if="item.type!=''" style="margin-right: 10px;">{{ item.info[0].type }}</span>
                        <span v-if="item.focus!=''" style="margin-right: 10px;">{{ item.info[0].focus=="985211"?"985,211":item.info[0].focus }}</span>
                        <span v-if="item.firstRate!=''" style="margin-right: 10px;">{{ item.info[0].firstRate }}</span>
                    </div>
                    <div  v-if="item.info[0].minScore!=0 && item.info[0].minRanking!=0" style="font-size: 14px;color: rgb(0, 58, 0);background-color: rgb(217, 255, 217);border-radius: 3px;padding: 5px 5px;position: unset;right: 20px;top: 20px;margin-top: 5px;">
                        最低分/最低位次：{{ item.info[0].minScore + "/" + item.info[0].minRanking }}
                    </div>
                </div>
          </div>
          <div v-if="rightPageId==2 && isGetting==false">
            <div v-if="majorcontents.length==0" style="width: 100%;padding: 20px 20px;text-align: center;margin-bottom: 20px;">
              专业收藏夹为空
            </div>
            <div class="university-item" v-bind:key="item" v-for="item in majorcontents" style="width: 100%;padding: 10px 10px;border-radius: 5px;border: 1px solid rgb(230,230,230);margin-bottom: 10px;" @click="showMajorIntroductionPage(item.info[0].majorName)">
              <div style="font-size: 18px;font-weight: bold;margin-bottom: 5px;">
                {{ item.info[0].majorName }}
              </div>
              <div style="font-size: 14px;">
                {{ item.info[0].class + ' ' + item.info[0].majorClass + ' ' + item.info[0].remark + " " + item.info[0].year }}
              </div>
            </div>
          </div>
        </div>
       </div>
    </div>
   </template>
   
   <script>
   import axios from 'axios';
   
   export default{
       components:{
        
       },
  data(){
    return{
        rightPageId:1,
        isGetting:false,
        universities:[],
        majorcontents:[],
    }
  },
  mounted(){
    if(this.data.loginedUserInfo==undefined){
      this.changePage(7);
      return;
    }
    if(this.$route.query.page=='2'){
      this.rightPageId=2;
    }
    this.get();
  },
  methods:{
    changePage1(id){
      this.rightPageId=id;
      if(id==1){
        this.changePage(4);
      }else{
        this.changePage(9);
      }
    },
    get(){
      this.isGetting=true;
      if(this.rightPageId==1){
        var config = {
   method: 'get',
   url: '/api/v1/favoriteuniversities/get?data=' + JSON.stringify({
    userAccount:this.data.loginedUserInfo.account
   }),
   headers: { 
      'Accept': '*/*'
   }
};

axios(config)
.then((res) => {
  console.log(res)
  this.isGetting=false;
  this.universities=res.data.results
})
      }else{
        var config1 = {
   method: 'get',
   url: '/api/v1/favoritemajorcontents/get?data=' + JSON.stringify({
    userAccount:this.data.loginedUserInfo.account
   }),
   headers: { 
      'Accept': '*/*', 
   }
};

axios(config1)
.then((res) => {
  console.log(res)
  this.isGetting=false;
  this.majorcontents=res.data.results
})
      }
    }
  },
  props:{
    data:undefined,
    changePage:undefined,
    showUniversityIntroductionPage:undefined,
    showMajorIntroductionPage:undefined,
  },
}
</script>

<style scoped>

.right-button svg{
  position: absolute;
  right: 15px;
  top: 15px;
}

.right-button:hover{
  background-color: rgb(242,242,242);
}

.right-button{
  width: 100%;
  padding: 15px 15px;
  border-radius: 5px;
  cursor: pointer;
  line-height: 15px;
  position: relative;
  margin-bottom: 5px;
}


.menu-item:hover{
    background-color: rgb(0,110,205);
}

.menu-item{
    width: 100%;
    padding: 10px 10px;
    border-radius: 5px;
    cursor: pointer;
    background-color: rgb(0,120,215);
    color: white;
    position: relative;
}

.university-item:active{
    scale: 0.99;
}

.university-item{
    transition: scale .1s;
}
</style>